<template>
  <div class="my-load">
    <el-upload
      :action="action"
      :headers="headers"
      :file-list="fileList"
      multiple
      list-type="picture-card"
      :limit="limit"
      :class="{ hide: hideUploadEdit }"
      :on-change="handleEditChange"
      :on-preview="handlePictureCardPreview"
      :on-success="handleSuccess"
      :on-remove="handleRemove">
      <i class="el-icon-plus"></i>
    </el-upload>
    <el-dialog width="1200px" :visible.sync="dialogVisible" :append-to-body="true">
      <img width="100%" :src="dialogImageUrl" alt="">
    </el-dialog>
  </div>
</template>

<script>
import { mapActions } from 'vuex'
import util from '@/libs/util'
import { request } from '@/api/service'
import axios from 'axios'
export default {
  name: 'my-upload',
  props: {
    limit: {
      type: Number,
      default: 1
    },
    preview: {
      type: Array,
      default: null,
      required: false
    }
  },
  data() {
    return {
      action: process.env.VUE_APP_API + '/sys/oss/upload',
      fileList: [],
      headers: {
        token: util.cookies.get('token')
      },
      hideUploadEdit: false,
      dialogImageUrl: '',
      dialogVisible: false,
      timer: null
    }
  },
  watch: {
    preview: {
      deep: true,
      handler() {
        this.fileList = []
        this.$nextTick(() => {
          this.setInfo()
        })
      }
    },
    fileList: {
      deep: true,
      handler(arr) {
        this.hideUploadEdit = arr.length >= this.limit
      }
    }
  },
  methods: {
    ...mapActions('d2admin/sys.upload', [
      'uploadDelete'
    ]),
    // 回显
    setInfo () {
      this.timer = null
      clearTimeout(this.timer)
      this.timer = setTimeout(() => {
        if (this.preview) {
          this.preview.forEach((item, index) => {
            let obj = {}
            axios.get(item + '?t=' + new Date().getTime(), {
              headers: {
                token: util.cookies.get('token')
              }
            }).then(res => {
              obj.url = item
              this.fileList.push(obj)
            }).catch(err => {
              console.log(err)
            })
          })
        }
      }, 500)
    },
    handleEditChange(file, fileList) {
      this.hideUploadEdit = fileList.length >= this.limit
    },
    handleSuccess (response, file, fileList) {
      new Promise((resolve, reject) => {
        let fileData = []
        fileList.forEach(file => {
          if (file.response) {
            fileData.push(file.response.data)
          }
        })
        resolve(fileData)
      }).then(res => {
        this.$emit('upload', res)
      })
    },
    handleRemove(file, fileList) {
      this.hideUploadEdit = fileList.length >= this.limit
      this.$emit('remove', file.response ? file.response.data.url : file.url)
    },
    handlePictureCardPreview(file) {
      this.dialogImageUrl = file.url
      this.dialogVisible = true
    }
  }
}
</script>

<style lang="scss">
.my-load {
  // 隐藏上传按钮
  .hide .el-upload--picture-card {
    display: none;
  }
  // 只针对本项目的大小
  .el-upload-list__item,
  .el-upload--picture-card {
    width: 114px;
    height: 114px;
  }
  .el-upload--picture-card {
    line-height: 122px;
  }
  .el-progress-circle {
    width: 100px!important;
    height: 100px!important;
  }
  .el-upload-list--picture-card .el-progress {
    width: 100px!important;
  }
}
</style>
